<template>
  <div class="c-header">
    <slot/>
    &nbsp;&nbsp;
    <div style="width: 240px">
      <el-input :model-value="keyword" placeholder="请输入搜索关键词" clearable
                @input="(val: string) => $emit('onKeywordChange', val)" @clear="()=>$emit('onClearKeyword')"/>
    </div>
    &nbsp;&nbsp;
    <el-button type="primary" @click="()=>$emit('onSearch')">
      <el-icon>
        <Search/>
      </el-icon>&nbsp;搜索
    </el-button>
    <el-button type="default" @click="()=>$emit('onReset')">
      <el-icon>
        <RefreshLeft/>
      </el-icon>&nbsp;重置
    </el-button>
    <el-button type="success" v-if="!hideNew" @click="()=>$emit('onNew')">
      <el-icon v-if="!newLabel">
        <Plus/>
      </el-icon>
      &nbsp;{{ newLabel || '新增' }}
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import {
  Plus,
  RefreshLeft,
  Search,
} from '@element-plus/icons-vue';

const props = defineProps<{
  hideNew?: boolean
  newLabel?: string
  keyword: string | undefined
}>()
// const showNew = ref(props.showNew)
const emit = defineEmits([
  'onClearKeyword',
  'onKeywordChange',
  'onSearch',
  'onReset',
  'onNew'
])

</script>

<style lang="scss" scoped>
.c-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
}
</style>